<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.orderNum" placeholder="订单编号" style="width: 170px;"></el-input>
        <el-input clearable v-model="search.orderName" placeholder="订单名称" style="width: 170px;margin-left:5px;"></el-input>
        <el-input clearable v-model="search.nickName" placeholder="用户昵称" style="width: 170px;margin-left:5px;"></el-input>
        <el-input clearable v-model="search.phone" placeholder="用户手机号" style="width: 170px;margin-left:5px;"></el-input>
        <el-input clearable v-model="search.shopName" placeholder="店铺名称" style="width: 170px;margin-left:5px;"></el-input>
        <el-select v-model="search.type" clearable placeholder="订单状态" style="width: 130px; margin-left:5px;">
            <el-option 
            v-for="(item,index) in selectOptions.orderState"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="15%" align="center" label="订单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNum }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="15%" align="center" label="课程">
        <template slot-scope="scope">
          <div class="box-img-text">
            <span><bx-image :src="scope.row.imageConvert" :show-delete="false"  :width="50" :height="50"></bx-image> </span>
            <span>{{scope.row.name}}</span>
          </div>
        </template>
      </el-table-column>
     <el-table-column  min-width="15%" align="center" label="用户信息">
        <template slot-scope="scope">
          <div class="userinfo">
            <span class="portrait"><bx-image :src="scope.row.headPortrait" :show-delete="false"  :width="50" :height="50"></bx-image> </span>
            <span class="info">
              <div>{{scope.row.nickName}}</div>
              <div>{{scope.row.phone}}</div>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="订单名称">
        <template slot-scope="scope">
          <span>{{ scope.row.orderName }}</span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" label="支付方式">
        <template slot-scope="scope">
            <span>{{scope.row.payType | parsePayType}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="价格">
        <template slot-scope="scope">
            <span>{{(scope.row.money/100).toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="状态">
        <template slot-scope="scope">
            <el-tag :type="['info','success','primary','danger','warning',''][scope.row.tradeState]">{{scope.row.tradeState | parseTradeState }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="下单时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="支付时间">
        <template slot-scope="scope">
          <span>{{ scope.row.okTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作"  min-width="15%">
        <template slot-scope="scope">
          <router-link :to="'/ordermanage/ordersdetail/'+scope.row.id">
            <el-button type="primary" size="small">
              详情
            </el-button>
          </router-link>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as courseApi from '@/api/courseinfo'
import * as shopApi from '@/api/shop'
import * as orderApi from '@/api/orders'
import * as uploadApi from '@/api/upload'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'

export default {
  name: 'OrdersInfoShop',
  components: { Pagination,BxImage },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        orderName:'',
        orderNum:'',
        type:-1,
        phone:'',
        nickName:'',
        shopName:''
      },
      search:{
        orderName:'',
        orderNum:'',
        type:'',
        phone:'',
        nickName:'',
        shopName:''
      },
      selectOptions:{
          orderState:null,
          // [
          //     {label:'待付款',value:'1'},
          //     {label:'已付款',value:'2'},
          //     {label:'已关闭',value:'0'},
          // ],
      }
    }
  },
  created(){
      var that=this;
      that.getList();
      that.selectOptions.orderState=[];
      Object.values(enumHelper.order.tradeState).map(v=>{
        if(typeof(v)!='number'){return;}
        that.selectOptions.orderState.push({label:enumHelper.order.tradeState.getName(v),value:v});
      })
  },
  mounted(){

  },
  filters:{
    parseTradeState(state){
      return enumHelper.order.tradeState.getName(state);
    },
    parsePayType(state){
      return enumHelper.order.payType.getName(state);
    },
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      orderApi.getOrderList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              item.imageConvert=imageHelper.GetFullUrl(item.image,200,200);
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total;

         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.orderName=that.search.orderName.trim();
      that.listQuery.orderNum=that.search.orderNum.trim();
      that.listQuery.phone=that.search.phone.trim();
      that.listQuery.nickName=that.search.nickName.trim();
      that.listQuery.shopName=that.search.shopName.trim();
      that.listQuery.type=(that.search.type !=='' ? that.search.type : -1);
      that.getList();
    },
    
  }
}
</script>
<style scoped>
 .userinfo{ display:flex; align-items: flex-start;}
 .userinfo>span.portrait{ width:45px; height: 45px; border-radius: 50%; overflow: hidden;}
 .userinfo>span.info{ width:auto; text-align: left; padding-left:5px; box-sizing: border-box;}
</style>
